<template>
	<view>
		<view class="tabs">
			<!-- <text v-for="item in navList" :key="item.orderState" @click="orderHandler(item)">{{item.title}}</text>
			<view class="cursor"></view> -->
			<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#4cd964"
				@clickItem="onClickItem" />
		</view>
		<view class="orderList" v-if="this.orderList.length">
			<view class="card" v-for="item in orderList" :key="item.id">
				<view class="status">
					<text class="time">{{item.createTime}}</text>
					<view>
						<text>{{orderListState}}</text>
						<text class="icon-delete" @click="deleteOrder"></text>
					</view>
				</view>
				<navigator :url="'/subpkg/order_detail/order_detail?type=' + item.id" class="goods"
					v-for="goods in item.skus" :key="goods.id">
					<view class="image">
						<image :src="goods.image" mode=""></image>
					</view>
					<view class="content">
						<view class="name">
							{{goods.name}}
						</view>
						<view class="type">
							{{goods.attrsText}}
						</view>
					</view>
				</navigator>
				<view class="payment">
					<text class="quantity">共{{item.totalNum}}件商品</text>
					<text>实付</text>
					<text class="amount">
						<text class="symbol">￥</text>{{item.totalMoney}}
					</text>
				</view>
				<view class="action">
					<navigator :url="'/subpkg/order_detail/order_detail?type=' + item.id" v-if="item.orderState === 1">
						<view class="button primary">
							去付款
						</view>
					</navigator>
					<view class="button primary" @click="againBy(item.id)" v-else>
						再次购买
					</view>
					<view class="button" @click="deleteOrder">
						删除订单
					</view>
				</view>
			</view>
		</view>
		<view v-else class="blank">暂无数据~</view>
	</view>
</template>

<script>
	import {
		getOrderList
	} from '@/api/order.js'
	export default {
		data() {
			return {
				items: ['全部', '待付款', '待发货', '待收货', '待评价'],
				current: 0,
				orderList: [],
				page: 1,
				pageSize: 10,
				total: 0,
				orderListState: '',
				isLoading: false
			}
		},
		computed: {
			orderState() {
				const orderState = this.orderList.map(item => item.orderState)
				//console.log('orderState', orderState);
				return orderState.forEach(item => {
					//console.log('item',item);
					switch (item) {
						case 1:
							this.orderListState = "待付款"
							break;
						case 2:
							this.orderListState = "待发货"
							break;
						case 3:
							this.orderListState = "待收货"
							break;
						case 4:
							this.orderListState = "待评价"
							break;
						case 5:
							this.orderListState = "已完成"
							break;
						case 6:
							this.orderListState = "已取消"
							break;
						default:
							break;
					}
				})
			}
		},
		onLoad(options) {
			const type = options.type
			console.log('options', Number(type));
			this.current = Number(type)
			this.getOrderList()
		},
		methods: {
			onClickItem(e) {
				console.log(e);
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
					this.orderList = []
					this.page = 1
					this.total = 0
					this.getOrderList()
				}
			},
			async getOrderList() {
				this.isLoading = true
				uni.showLoading({
					title: "加载中"
				})
				const {
					result
				} = await getOrderList({
					page: this.page,
					pageSize: this.pageSize,
					orderState: this.current
				})
				uni.hideLoading()
				console.log('getOrderList', result);
				this.orderList = [...this.orderList, ...result.items]
				this.total = result.counts
				this.isLoading = false

			},
			deleteOrder() {
				uni.showToast({
					title: "删除成功"
				})
			},
			againBy(id) {
				uni.navigateTo({
					url: '/subpkg/toPay/toPay?id=' + id
				})
			},
		},
		onPullDownRefresh() {
			this.orderList = []
			this.page = 1
			this.total = 0
			this.getOrderList(() => {
				uni.stopPullDownRefresh()
			})

		},
		onReachBottom() {
			if (this.orderList.length >= this.total) return uni.showToast({
				title: "数据加载完毕..."
			})
			if (this.isLoading) return
			this.page += 1
			this.getOrderList()
		}
	}
</script>

<style>
	page {
		height: 100%;
		padding-top: 80rpx;
		background-color: #f7f7f8;
	}

	.tabs {
		width: 100%;
		line-height: 60rpx;
		margin: 0 10rpx;
		background-color: #fff;
		box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
		position: fixed;
		top: 0;
		z-index: 9;
	}

	.orderList {
		width: 100%;
		height: 100%;
	}

	.card {
		min-height: 100rpx;
		padding: 20rpx;
		margin: 20rpx 20rpx 0;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.status {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		color: #999;
		margin-bottom: 15rpx;
	}

	.icon-delete {
		line-height: 1;
		margin-left: 10rpx;
		padding-left: 10rpx;
		border-left: 1rpx solid #e3e3e3;
	}

	.goods {
		display: flex;
		margin-bottom: 20rpx;
	}

	.goods image {
		width: 170rpx;
		height: 170rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.goods .content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.goods .content .name {
		height: 80rpx;
		font-size: 26rpx;
		color: #444;
	}

	.goods .content .type {
		line-height: 1.8;
		padding: 0 15rpx;
		margin-top: 10rpx;
		font-size: 24rpx;
		align-self: flex-start;
		border-radius: 4rpx;
		color: #888;
		background-color: #f7f7f8;
	}

	.payment {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		line-height: 1;
		padding: 20rpx 0;
		text-align: right;
		color: #999;
		font-size: 28rpx;
		border-bottom: 1rpx solid #eee;
	}

	.payment .quantity {
		font-size: 24rpx;
		margin-right: 16rpx;
	}

	.amount {
		color: #444;
		margin-left: 6rpx;
	}

	.symbol {
		font-size: 20rpx;
	}

	.action {
		display: flex;
		flex-direction: row-reverse;
		justify-content: flex-start;
		padding-top: 20rpx;
	}

	.action .button {
		width: 200rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		margin-left: 20rpx;
		border-radius: 60rpx;
		border: 1rpx solid #ccc;
		font-size: 26rpx;
		color: #444;
	}

	.action .primary {
		color: #27ba9b;
		border-color: #27ba9b;
	}

	.blank {
		width: 100%;
		height: 1334rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #666;
	}
</style>